import { reactive, readonly } from 'vue';
import { useRouter } from 'vue-router';

// 使用 reactive 创建响应式状态
const state = reactive({
    tabs: [],
    activeTabPath: ''
});

// 默认首页标签配置
const HOME_TAB = {
    title: '首页',
    path: '/jboltai',
    closable: false // 首页不允许关闭
};

export const tabStore = {
    // 获取所有标签
    getTabs: () => readonly(state.tabs),

    // 获取当前激活的标签路径
    getActiveTabPath: () => state.activeTabPath,

    // 设置当前激活的标签
    setActiveTab: (path) => {
        state.activeTabPath = path;
        return state.activeTabPath;
    },

    // 添加标签页
    addTab: (menuItem) => {
        const existingTab = state.tabs.find(tab => tab.path === menuItem.key);
        if (!existingTab) {
            state.tabs.push({
                title: menuItem.label,
                path: menuItem.key,
                closable: menuItem.key !== HOME_TAB.path // 首页不可关闭
            });
        }
        state.activeTabPath = menuItem.key;
        return readonly(state.tabs);
    },

    // 关闭标签页
    closeTab: (key, router) => {
        const index = state.tabs.findIndex(tab => tab.path === key);
        if (index > -1 && state.tabs[index].closable) { // 检查是否可关闭
            // 保存要删除的标签信息，用于页面清理
            const closedTab = {...state.tabs[index]};

            // 从标签数组中移除
            state.tabs.splice(index, 1);

            // 如果关闭的是当前激活的标签，则跳转到其他标签
            if (key === state.activeTabPath) {
                // 必须使用传入的router实例，而不是在这里重新创建
                const nextTab = state.tabs[index - 1] || state.tabs[0];
                if (nextTab) {
                    // 设置下一个活动标签路径
                    state.activeTabPath = nextTab.path;

                    // 使用router进行导航
                    router.push(nextTab.path);
                }
            }

            // 返回被关闭的标签信息，以便在外部处理缓存
            return {
                tabs: readonly(state.tabs),
                closedTab
            };
        }

        return {
            tabs: readonly(state.tabs),
            closedTab: null
        };
    },

    // 初始化首页标签
    initHomePage: () => {
        if (!state.tabs.some(tab => tab.path === HOME_TAB.path)) {
            state.tabs.push(HOME_TAB);
        }
        return readonly(state.tabs);
    },

    // 根据 URL 打开标签页（不一定是菜单项）
    openTabByUrl: (url, title) => {
        const existingTab = state.tabs.find(tab => tab.path === url);
        if (!existingTab) {
            state.tabs.push({
                title: title || url, // 如果没有提供标题，使用URL作为标题
                path: url,
                closable: url !== HOME_TAB.path // 首页不可关闭
            });
        }
        state.activeTabPath = url;
        return readonly(state.tabs);
    },

    // 更新标签页标题
    updateTabTitle: (path, newTitle) => {
        const tab = state.tabs.find(tab => tab.path === path);
        if (tab) {
            tab.title = newTitle;
        }
        return readonly(state.tabs);
    },

    // 根据当前路由路径初始化标签
    initTabByPath: (path, title) => {
        if (!state.tabs.some(tab => tab.path === path)) {
            // 首先确保有首页标签
            tabStore.initHomePage();

            // 然后添加当前路径的标签
            if (path !== HOME_TAB.path) {
                state.tabs.push({
                    title: title || path,
                    path: path,
                    closable: true
                });
            }
        }
        state.activeTabPath = path;
        return readonly(state.tabs);
    }
};